.i2-content {
    background-color: #000000;
    width: 100%;
    max-width: 1350px;
    height: 741px;
    .introduce3 {
        width: 33.1%;
        height: 33.3%;
        float: left;
        margin-left: 2px;
        margin-top: 1px;
        position: relative;
        .masks3 {
            width: 42%;
            height: 100%;
            background-color: rgba(255,255,255,0.7);
            position: absolute;
            z-index: 100;
            top: 0;
            right: 0;
            .masks3-text {
                width: 100%;
                height: 61%;
                .h1 {
                    width:100%； height: 25%;
                    font-size: 31px;
                    font-weight: lighter;
                    text-align: center;
                    margin-top: 28px;
                }
                .h2 {
                    width: 100%;
                    height: 15%;
                    font-size: 18px;
                    font-weight: lighter;
                    text-align: center;
                    margin-top: -5px;
                }
                .h3 {
                    width: 70%;
                    height: 20%;
                    background-color: #333333;
                    margin: 0 auto;
                    text-align: center;
                    color: #fff994;
                    font-size: 12px;
                    line-height: 25px;
                }
                .h3:hover {
                    background-color: red;
                }
                .tb {
                    width: 77%;
                    height: 30px;
                    margin-left: 45px;
                    margin-top: 10px;
                }
            }
            .masks33 {
                width: 100%;
                height: 27.5%;
                background-color: white;
            }
        }
        .mask3:hover {
            background-color: white;
        }
    }
    .introduce {
        width: 33.1%;
        height: 33.3%;
        float: left;
        margin-left: 2px;
        margin-top: 1px;
        position: relative;
        .mask {
            width: 42%;
            height: 100%;
            background-color: rgba(255,255,255,0.7);
            position: absolute;
            z-index: 100;
            top: 0;
            right: 0;
            .mask-text {
                width: 100%;
                height: 61%;
                .h1 {
                    width:100%； height: 25%;
                    font-size: 31px;
                    font-weight: lighter;
                    text-align: center;
                    margin-top: 28px;
                }
                .h2 {
                    width: 100%;
                    height: 15%;
                    font-size: 18px;
                    font-weight: lighter;
                    text-align: center;
                    margin-top: -5px;
                }
                .h3 {
                    width: 70%;
                    height: 20%;
                    background-color: #333333;
                    margin: 0 auto;
                    text-align: center;
                    color: #fff994;
                    font-size: 12px;
                    line-height: 25px;
                }
                .h3:hover {
                    background-color: red;
                }
                .tb {
                    width: 77%;
                    height: 30px;
                    margin-left: 45px;
                    margin-top: 10px;
                }
            }
            .mask2 {
                width: 100%;
                height: 27.5%;
                background-color: white;
            }
        }
        .masks {
            width: 42%;
            height: 100%;
            background-color: rgba(255,255,255,0.7);
            position: absolute;
            z-index: 100;
            top: 0;
            left: 0;
            .mask-text {
                width: 100%;
                height: 61%;
                .h1 {
                    width:100%； height: 25%;
                    font-size: 31px;
                    font-weight: lighter;
                    text-align: center;
                    margin-top: 28px;
                }
                .h2 {
                    width: 100%;
                    height: 15%;
                    font-size: 18px;
                    font-weight: lighter;
                    text-align: center;
                    margin-top: -5px;
                }
                .h3 {
                    width: 70%;
                    height: 20%;
                    background-color: #333333;
                    margin: 0 auto;
                    text-align: center;
                    color: #fff994;
                    font-size: 12px;
                    line-height: 25px;
                }
                .h3:hover {
                    background-color: red;
                }
                .tb {
                    width: 77%;
                    height: 30px;
                    margin-left: 45px;
                    margin-top: 10px;
                }
            }
            .masks2 {
                width: 100%;
                height: 27.5%;
                background-color: white;
            }
        }
        .mask:hover {
            background-color: white;
        }
        .masks:hover {
            background-color: white;
        }
    }
}
@media only screen and (max-width: 760px) {
    .i2-content {
        background-color: #000000;
        width: 100%;
        max-width: 760px;
        height: 741px;
        .introduce3 {
            width: 100%;
            height: 33.3%;
            float: left;
            margin-left: 2px;
            margin-top: 1px;
            position: relative;
            .masks3 {
                width: 42%;
                height: 100%;
                background-color: rgba(255,255,255,0.7);
                position: absolute;
                z-index: 100;
                top: 0;
                right: 0;
                .masks3-text {
                    width: 100%;
                    height: 61%;
                    .h1 {
                        width:100%； height: 25%;
                        font-size: 31px;
                        font-weight: lighter;
                        text-align: center;
                        margin-top: 28px;
                    }
                    .h2 {
                        width: 100%;
                        height: 15%;
                        font-size: 18px;
                        font-weight: lighter;
                        text-align: center;
                        margin-top: -4px;
                    }
                    .h3 {
                        width: 70%;
                        height: 20%;
                        background-color: #333333;
                        margin: 0 auto;
                        text-align: center;
                        color: #fff994;
                        font-size: 12px;
                        line-height: 25px;
                    }
                    .h3:hover {
                        background-color: red;
                    }
                    .tb {
                        width: 51%;
                        height: 30px;
                         margin-left: 45px;
                        margin-top: 10px;
                    }
                }
                .masks33 {
                    width: 100%;
                   height: 27.5%;
                    background-color: white;
                }
            }
            .mask3:hover {
                background-color: white;
            }
        }
        .introduce {
            width: 100%;
            height: 33.3%;
            float: left;
            margin-left: 2px;
            margin-top: 1px;
            position: relative;
            .mask {
                width: 42%;
                height: 100%;
                background-color: rgba(255,255,255,0.7);
                position: absolute;
                z-index: 100;
                top: 0;
                right: 0;
                .mask-text {
                    width: 100%;
                    height: 61%;
                    .h1 {
                        width:100%； height: 25%;
                        font-size: 31px;
                        font-weight: lighter;
                        text-align: center;
                        margin-top: 28px;
                    }
                    .h2 {
                        width: 100%;
                        height: 15%;
                        font-size: 18px;
                        font-weight: lighter;
                        text-align: center;
                        margin-top: -5px;
                    }
                    .h3 {
                        width: 70%;
                        height: 20%;
                        background-color: #333333;
                        margin: 0 auto;
                        text-align: center;
                        color: #fff994;
                        font-size: 12px;
                        line-height: 25px;
                    }
                    .h3:hover {
                        background-color: red;
                    }
                    .tb {
                        width: 51%;
                        height: 30px;
                        margin-left: 45px;
                        margin-top: 10px;
                    }
                }
                .mask2 {
                    width: 100%;
                    height: 27.5%;
                    background-color: white;
                }
            }
            .masks {
                width: 42%;
                height: 100%;
                background-color: rgba(255,255,255,0.7);
                position: absolute;
                z-index: 100;
                top: 0;
                left: 0;
                .mask-text {
                    width: 100%;
                    height: 61%;
                    .h1 {
                        width:100%； height: 25%;
                        font-size: 31px;
                        font-weight: lighter;
                        text-align: center;
                        margin-top: 28px;
                    }
                    .h2 {
                        width: 100%;
                        height: 15%;
                        font-size: 18px;
                        font-weight: lighter;
                        text-align: center;
                        margin-top: -5px;
                    }
                    .h3 {
                        width: 70%;
                        height: 20%;
                        background-color: #333333;
                        margin: 0 auto;
                        text-align: center;
                        color: #fff994;
                        font-size: 12px;
                        line-height: 25px;
                    }
                    .h3:hover {
                        background-color: red;
                    }
                    .tb {
                        width: 77%;
                        height: 30px;
                        margin-left: 45px;
                        margin-top: 10px;
                    }
                }
                .masks2 {
                    width: 100%;
                    height: 27.5%;
                    background-color: white;
                }
            }
            .mask:hover {
                background-color: white;
            }
            .masks:hover {
                background-color: white;
            }
        }
    }
}
@media only screen and (min-width: 761px) and (max-width: 1024px) {
    .i2-content {
        background-color: #000000;
        width: 100%;
        max-width: 1024px;
        height: 741px;
        .introduce3 {
            width: 100%;
            height: 33.3%;
            float: left;
            margin-left: 2px;
            margin-top: 1px;
            position: relative;
            .masks3 {
                width: 42%;
                height: 100%;
                background-color: rgba(255,255,255,0.7);
                position: absolute;
                z-index: 100;
                top: 0;
                right: 0;
                .masks3-text {
                    width: 100%;
                    height: 61%;
                    .h1 {
                        width:100%； height: 25%;
                        font-size: 31px;
                        font-weight: lighter;
                        text-align: center;
                        margin-top: 28px;
                    }
                    .h2 {
                        width: 100%;
                        height: 15%;
                        font-size: 18px;
                        font-weight: lighter;
                        text-align: center;
                        margin-top: 10px;
                    }
                    .h3 {
                        width: 70%;
                        height: 20%;
                        background-color: #333333;
                        margin: 0 auto;
                        text-align: center;
                        color: #fff994;
                        font-size: 18px;
                        line-height: 25px;
                    }
                    .h3:hover {
                        background-color: red;
                    }
                    .tb {
                        width: 43%;
                        height: 30px;
                        margin-left: 141px;
                        margin-top: 25px;
                    }
                }
                .masks33 {
                    width: 100%;
                    height: 0;
                    background-color: white;
                }
            }
            .mask3:hover {
                background-color: white;
            }
        }
        .introduce {
            width: 49.7%;
            height: 33.3%;
            float: left;
            margin-left: 2px;
            margin-top: 1px;
            position: relative;
            .mask {
                width: 42%;
                height: 100%;
                background-color: rgba(255,255,255,0.7);
                position: absolute;
                z-index: 100;
                top: 0;
                right: 0;
                .mask-text {
                    width: 100%;
                    height: 61%;
                    .h1 {
                        width:100%； height: 25%;
                        font-size: 31px;
                        font-weight: lighter;
                        text-align: center;
                        margin-top: 28px;
                    }
                    .h2 {
                        width: 100%;
                        height: 15%;
                        font-size: 18px;
                        font-weight: lighter;
                        text-align: center;
                        margin-top: -5px;
                    }
                    .h3 {
                        width: 70%;
                        height: 20%;
                        background-color: #333333;
                        margin: 0 auto;
                        text-align: center;
                        color: #fff994;
                        font-size: 12px;
                        line-height: 25px;
                    }
                    .h3:hover {
                        background-color: red;
                    }
                    .tb {
                        width: 51%;
                        height: 30px;
                        margin-left: 45px;
                        margin-top: 10px;
                    }
                }
                .mask2 {
                    width: 100%;
                    height: 27.5%;
                    background-color: white;
                }
            }
            .masks {
                width: 42%;
                height: 100%;
                background-color: rgba(255,255,255,0.7);
                position: absolute;
                z-index: 100;
                top: 0;
                left: 0;
                .mask-text {
                    width: 100%;
                    height: 61%;
                    .h1 {
                        width:100%； height: 25%;
                        font-size: 31px;
                        font-weight: lighter;
                        text-align: center;
                        margin-top: 28px;
                    }
                    .h2 {
                        width: 100%;
                        height: 15%;
                        font-size: 18px;
                        font-weight: lighter;
                        text-align: center;
                        margin-top: -5px;
                    }
                    .h3 {
                        width: 70%;
                        height: 20%;
                        background-color: #333333;
                        margin: 0 auto;
                        text-align: center;
                        color: #fff994;
                        font-size: 12px;
                        line-height: 25px;
                    }
                    .h3:hover {
                        background-color: red;
                    }
                    .tb {
                        width: 77%;
                        height: 30px;
                        margin-left: 45px;
                        margin-top: 10px;
                    }
                }
                .masks2 {
                    width: 100%;
                    height: 27.5%;
                    background-color: white;
                }
            }
            .mask:hover {
                background-color: white;
            }
            .masks:hover {
                background-color: white;
            }
        }
    }
}